<!--
@name:editDorctorDialog
@author:Zhenglei
@date:16:14
@description:editDorctorDialog
@update:2022/5/2016:14
-->
<template>
  <el-dialog title="编辑医生"
             :visible.sync="visible"
             :before-close="modalClose"
             :close-on-click-modal="false"
             :close-on-press-escape="false">
    <el-form
      label-width="120px">
      <el-form-item label="复核医生：">
        <el-select v-model="doctorInfo"
                   placeholder="请选择复核医生"
                   filterable
                   value-key="id"
                   remote
                   :loading="searchLoading"
                   reserve-keyword
                   :remote-method="remoteMethod">
          <el-option v-for="item in doctorList"
                     :key="item.id"
                     :label="item.nickName"
                     :value="item">
          </el-option>
        </el-select>
        <el-button type="primary"
                   @click="handleOption('add')">增 加
        </el-button>
      </el-form-item>
      <el-form-item label="已选医生：">
        <element-table
          :columns="columns"
          :data="selectDoctor">
          <template v-slot:option="{row,index}">
            <el-button type="danger"
                       @click="handleOption('del',index)">删 除
            </el-button>
          </template>
        </element-table>
      </el-form-item>
    </el-form>
    <p align="center">
      <el-button type="primary"
                 @click="handleOption('submit', null)">确 认
      </el-button>
      <el-button @click="modalClose"
                 style="margin-left: 8px">取 消
      </el-button>
    </p>

  </el-dialog>
</template>

<script>
import ElementTable from "../../../../base/ElementTable";

export default {
  name: "editDorctorDialog",
  props: {
    doctorData: {
      type: Object,
      default: {}
    },
    visible: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      searchParams: {},
      doctorList: [],
      searchLoading: false,
      doctorInfo: '',
      selectDoctor: [],
      columns: [
        {
          label: '姓名',
          prop: 'nickName',
          align: "center",
        }, {
          label: '科室',
          prop: 'departmentName',
          align: "center",

        }, {
          label: '职称',
          prop: 'doctorTitleName',
          align: "center",
        }, {
          label: '操作',
          prop: 'option',
          align: 'center',
          isSlot: true,
        }
      ],
    }
  },
  created() {
    let parse = JSON.parse(JSON.stringify(this.doctorData));
    this.selectDoctor = parse.doctorDtos ? parse.doctorDtos : []
  },
  methods: {
    modalClose() {
      this.$emit('update:visible', false); // 直接修改父组件的属性
    },
    handleOption(op, row) {
      switch (op) {
        case 'add':
          if (this.doctorInfo) {
            let ids = this.selectDoctor.map(item => item.id);
            if (ids.indexOf(this.doctorInfo.id) === -1) {
              this.selectDoctor.push(this.doctorInfo)
            } else {
              this.$message.warning('请勿重复添加')
            }
          } else {
            this.$message.warning('请选择医生')
          }
          break
        case 'del':
          this.selectDoctor.splice(row, 1)
          break
        case 'submit':
          this.$emit('handleResultList', this.selectDoctor)
          this.modalClose()
          break
      }
    },

    //搜索医生
    remoteMethod(query) {
      if (query !== '') {
        this.searchLoading = true; // 锁住
        this.post(this.api.medicalConsortium.getReCheckDoctorList, {
          nickName: query,
          hospitalId: this.doctorData.hospitalId
        }).then(res => {
          if (res.data.code === '200') {
            this.searchLoading = false;
            this.doctorList = res.data.object;
          }
        })
      } else {
        this.doctorList = [];
      }
    },
  },
  components: {
    'element-table': ElementTable
  }
}
</script>

<style scoped>

</style>
